<template>
	<view class="records">
		<view class="single" v-for="(item,index) in list" :key="index">
			<view class="name">
				<text>提现到银行卡({{item.bank_card}})</text>
				<text class="status">{{item.status | statusFilter}}</text>
			</view>

			<view class="desc">
				<text class="remark">{{item.create_date}}</text>
				<text class="amount" v-if='type==1'>到账金额{{item.real_amount}}元</text>
				<text class="amount" v-else>手续费{{item.service_amount}}元到账金额{{item.real_amount}}元</text>
			</view>
		</view>

		<view class="nodata" v-if="list.length == 0">
			<image class="empty_img" :src="IMGLink+'/my/empty.png'" mode="widthFix"></image>
			<view>暂无记录</view>
		</view>
	</view>
</template>

<script>
	import {
		withdrawalRecordList
	} from '@/api/my/my.js';
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				list: [],
				refresh: false, // 下拉刷新标示
				type:1
			}
		},
		filters:{
			statusFilter(data){
				switch (data){
					case 3:
						return '已拒绝'
						break;
					case 2:
						return '审核中'
						break;
					case 1:
						return '提现成功'
						break;
					default:
						break;
				}
			}
		},
		onLoad(e) {
			this.type = e.type;
			this.getDataList();
		},
		methods: {
			// 列表
			 async getDataList() {
				const res = await withdrawalRecordList({
					type:this.type
				})
				if(res){
					res.data.map(i=>{
						i.bank_card = i.bank_card.substr(i.bank_card?.length-4,i.bank_card?.length)
						return i;
					})
					this.list = res.data;
				}
			},
			onPullDownRefresh() {
				this.getDataList();
				this.refresh = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import "../my.scss";

	.records {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #363636;

		.single {
			border-bottom: 2rpx solid #F3F3F3;
			padding: 20rpx;

			.name {
				font-size: 26rpx;
				color: #000000;
				margin-bottom: 26rpx;

				.status {
					color: #F54642;
				}
			}

			.desc,
			.name {
				@include flexLayout(center, space-between);

			}

			.remark {
				width: 81%;
				color: #595959;
			}

			.amount {
				width: 100%;
				text-align: right;
				// color: #F54642;
				// font-size: 30rpx;
				// font-weight: 500;
			}
		}

		.nodata {
			text-align: center;
			color: #7D7D7D;
			font-size: 24rpx;
			margin-top: 50%;

			.empty_img {
				width: 468rpx;
			}
		}
	}
</style>
